<template>
    <div style="position: relative">
        <div>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                status-icon
                :inline="true"
            >
                <el-form-item label="上级节点编码" prop="parentCode">
                    <el-input
                        v-model="ruleForm.parentCode"
                        placeholder="请输入"
                        style="width: 240px"
                        :disabled="ruleForm.id == 1 || ruleForm.isComp == 1"
                    />
                </el-form-item>
                <el-form-item label="上级节点名称" prop="parentName">
                    <el-input
                        v-model="ruleForm.parentName"
                        placeholder="请输入"
                        style="width: 240px"
                        :disabled="ruleForm.id == 1 || ruleForm.isComp == 1"
                    />
                </el-form-item>

                <el-form-item label="节点编码" prop="depCode" required>
                    <el-input
                        v-model="ruleForm.depCode"
                        placeholder="请输入"
                        style="width: 240px"
                        :disabled="ruleForm.isComp == 1"
                    />
                </el-form-item>
                <el-form-item label="节点名称" prop="depName" required>
                    <el-input
                        v-model="ruleForm.depName"
                        placeholder="请输入"
                        style="width: 240px"
                        :disabled="ruleForm.isComp == 1"
                    />
                </el-form-item>

                <el-form-item label="排序：" prop="sorts">
                    <el-input-number
                        v-model="ruleForm.sorts"
                        :min="0"
                        @change="handleChange"
                        style="width: 240px"
                        :disabled="ruleForm.isComp == 1"
                    />
                </el-form-item>

                <el-form-item
                    label="描述："
                    prop="comment"
                    style="width: 722px"
                >
                    <el-input
                        v-model="ruleForm.comment"
                        type="textarea"
                        :disabled="ruleForm.isComp == 1"
                    />
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="updateDep"
                        >确认</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import userHttp from "@/https/user.js";
const emits = defineEmits(["updateDep"]);
const props = defineProps({
    ruleFormProps: {
        type: Object,
        default: {},
    },
    type: {
        type: String,
        default: "",
    },
});
const ruleForm = reactive({
    depCode: "",
    depName: "",
    parentCode: "",
    parentName: "",
    isComp: "",
    sorts: 0,
    comment: "",
});
ruleForm.value = props.ruleFormProps.value;
watch(
    () => props.ruleFormProps,
    (val) => {
        ruleForm.id = val.id;
        ruleForm.depCode = val.depCode;
        ruleForm.depName = val.depName;
        ruleForm.parentCode = val.parentCode;
        ruleForm.parentName = val.parentName;
        ruleForm.isComp = val.isComp;
        ruleForm.sorts = val.sorts;
        ruleForm.comment = val.comment;
        console.log(ruleForm, "valvalval");
    },
    { deep: true }
);
const rules = reactive({
    depCode: [
        {
            required: true,
            message: "请输入节点编码",
            trigger: "blur",
        },
    ],
    depName: [
        {
            required: true,
            message: "请输入节点名称",
            trigger: "blur",
        },
    ],
});
const updateDep = async () => {
    if (props.type == "add" || props.type == "addNode") {
        const res = await userHttp.depAddDep(ruleForm);
        if (res.data.code === 200) {
            emits("updateDep");
        }
    } else {
        const res = await userHttp.depUpdateDep(ruleForm);
        if (res.data.code === 200) {
            emits("updateDep");
        }
    }
};
</script>

<style lang="less" scoped>
.filter {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    .filter-item {
        margin: 0 15px 15px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        label {
            font-size: 14px;
            color: #333;
            display: inline-block;
            white-space: nowrap;
        }
    }
}
.emptyBox {
    width: 100px;
    height: 300px;
}
.emptyNodata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
</style>